import React, { useState } from 'react';
import { Card, Tabs, Button, Table, Tag, Space, Image, ConfigProvider } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { TabsProps } from 'antd';
import styles from './index.less';
import zhCN from 'antd/locale/zh_CN';

const WorksAdmin: React.FC = () => {
  const [activeTab, setActiveTab] = useState('drama');

  // 影视作品列表列定义
  const dramaColumns = [
    {
      title: '剧名',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      width: '10%',
    },
    {
      title: '海报',
      dataIndex: 'poster',
      key: 'poster',
      width: '10%',
      render: (poster: string) => (
        poster ? <Image src={poster} width={80} height={120} /> : '-'
      ),
    },
    {
      title: '播出平台',
      dataIndex: 'platform',
      key: 'platform',
      width: '15%',
      render: (platforms: string[]) => (
        <Space wrap>
          {platforms?.map(platform => (
            <Tag key={platform}>{platform}</Tag>
          ))}
        </Space>
      ),
    },
    {
      title: '播出时间',
      dataIndex: 'releaseDate',
      key: 'releaseDate',
      width: '12%',
    },
    {
      title: '简介',
      dataIndex: 'description',
      key: 'description',
      width: '25%',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
      width: '13%',
      render: () => (
        <Space>
          <Button type="link">编辑</Button>
          <Button type="link" danger>删除</Button>
        </Space>
      ),
    },
  ];

  // 音乐作品列表列定义
  const musicColumns = [
    {
      title: '歌曲名',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
    },
    {
      title: '专辑',
      dataIndex: 'album',
      key: 'album',
      width: '15%',
    },
    {
      title: '封面',
      dataIndex: 'cover',
      key: 'cover',
      width: '10%',
      render: (cover: string) => (
        cover ? <Image src={cover} width={80} height={80} /> : '-'
      ),
    },
    {
      title: '发行时间',
      dataIndex: 'releaseDate',
      key: 'releaseDate',
      width: '12%',
    },
    {
      title: '音乐平台',
      dataIndex: 'platforms',
      key: 'platforms',
      width: '15%',
      render: (platforms: string[]) => (
        <Space wrap>
          {platforms?.map(platform => (
            <Tag key={platform}>{platform}</Tag>
          ))}
        </Space>
      ),
    },
    {
      title: '简介',
      dataIndex: 'description',
      key: 'description',
      width: '20%',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
      width: '13%',
      render: () => (
        <Space>
          <Button type="link">编辑</Button>
          <Button type="link" danger>删除</Button>
        </Space>
      ),
    },
  ];

  // 综艺节目列表列定义
  const varietyColumns = [
    {
      title: '节目名',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
    },
    {
      title: '角色定位',
      dataIndex: 'role',
      key: 'role',
      width: '10%',
    },
    {
      title: '海报',
      dataIndex: 'poster',
      key: 'poster',
      width: '10%',
      render: (poster: string) => (
        poster ? <Image src={poster} width={80} height={120} /> : '-'
      ),
    },
    {
      title: '播出平台',
      dataIndex: 'platform',
      key: 'platform',
      width: '15%',
      render: (platforms: string[]) => (
        <Space wrap>
          {platforms?.map(platform => (
            <Tag key={platform}>{platform}</Tag>
          ))}
        </Space>
      ),
    },
    {
      title: '播出时间',
      dataIndex: 'releaseDate',
      key: 'releaseDate',
      width: '12%',
    },
    {
      title: '简介',
      dataIndex: 'description',
      key: 'description',
      width: '25%',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
      width: '13%',
      render: () => (
        <Space>
          <Button type="link">编辑</Button>
          <Button type="link" danger>删除</Button>
        </Space>
      ),
    },
  ];

  // 舞台作品列表列定义
  const stageColumns = [
    {
      title: '演出名称',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
    },
    {
      title: '演出角色',
      dataIndex: 'role',
      key: 'role',
      width: '10%',
    },
    {
      title: '海报',
      dataIndex: 'poster',
      key: 'poster',
      width: '10%',
      render: (poster: string) => (
        poster ? <Image src={poster} width={80} height={120} /> : '-'
      ),
    },
    {
      title: '演出地点',
      dataIndex: 'venue',
      key: 'venue',
      width: '15%',
    },
    {
      title: '演出时间',
      dataIndex: 'performDate',
      key: 'performDate',
      width: '12%',
    },
    {
      title: '简介',
      dataIndex: 'description',
      key: 'description',
      width: '25%',
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
      width: '13%',
      render: () => (
        <Space>
          <Button type="link">编辑</Button>
          <Button type="link" danger>删除</Button>
        </Space>
      ),
    },
  ];

  const items: TabsProps['items'] = [
    {
      key: 'drama',
      label: '影视作品',
      children: (
        <div className={styles.tableContainer}>
          <div className={styles.toolbar}>
            <Button type="primary" icon={<PlusOutlined />}>
              添加影视
            </Button>
          </div>
          <Table columns={dramaColumns} dataSource={[]} rowKey="id" />
        </div>
      ),
    },
    {
      key: 'music',
      label: '音乐作品',
      children: (
        <div className={styles.tableContainer}>
          <div className={styles.toolbar}>
            <Button type="primary" icon={<PlusOutlined />}>
              添加音乐
            </Button>
          </div>
          <Table columns={musicColumns} dataSource={[]} rowKey="id" />
        </div>
      ),
    },
    {
      key: 'variety',
      label: '综艺节目',
      children: (
        <div className={styles.tableContainer}>
          <div className={styles.toolbar}>
            <Button type="primary" icon={<PlusOutlined />}>
              添加综艺
            </Button>
          </div>
          <Table columns={varietyColumns} dataSource={[]} rowKey="id" />
        </div>
      ),
    },
    {
      key: 'stage',
      label: '舞台作品',
      children: (
        <div className={styles.tableContainer}>
          <div className={styles.toolbar}>
            <Button type="primary" icon={<PlusOutlined />}>
              添加舞台作品
            </Button>
          </div>
          <Table columns={stageColumns} dataSource={[]} rowKey="id" />
        </div>
      ),
    },
  ];

  return (
    <ConfigProvider 
      locale={zhCN}
      form={{ 
        requiredMark: true,  // 显式启用必填标记
        colon: true,
      }}
    >
      <Card title="作品信息管理">
        <Tabs
          activeKey={activeTab}
          items={items}
          onChange={(key) => setActiveTab(key)}
        />
      </Card>
    </ConfigProvider>
  );
};

export default WorksAdmin; 